<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element头部效果</title>
    <style>
       * {
    /* 初始化 取消页面的内外边距 */
    padding: 0;
    margin: 0;
}
 
.box {
    /* 弹性布局 使页面元素水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 使页面占屏幕总高 */
    height: 100vh;
    /* 背景的渐变色 */
    background-image: linear-gradient(#70e, #f57);
}
 
.box ul {
    width: 1000px;
    height: 320px;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 过渡为0.3秒 */
    transition: all .3s;
}
 
.box ul li {
    /* 相对定位 */
    position: relative;
    float: left;
    list-style-type: none;
    width: 200px;
    height: 320px;
    /* 过渡为0.5秒 */
    transition: all .5s;
}
 
.box ul li p {
    /* 绝对定位 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    /* 文字遮罩层 */
    background-color: rgba(0, 0, 0, .3);
    transition: all .3s;
}
.box ul li image{
  width: 1100px;
  height: 100px;
}
 
.box ul li:hover p {
    font-size: 20px;
}
 
/* 鼠标移入时让所有的li宽度变为90px */
.box ul:hover li {
    width: 90px;
}
/* 鼠标移入时让当前的宽度变为640px */
.box ul li:hover {
    width: 640px;
}
    </style>
</head>
<body>
  <div class="box">
     <ul>
      <li>
        <img src="https://lmg.jj20.com/up/allimg/1114/032221110303/210322110303-6-1200.jpg" alt="" mode="aspectFit"/>
        <p>紫色晚霞</p>
      </li>
      <li>
        <img src="https://lmg.jj20.com/up/allimg/1114/010421142927/210104142927-8-1200.jpg" alt="" mode="aspectFit"/>
        <p>风起云涌</p>
      </li>
      <li>
        <img src="https://lmg.jj20.com/up/allimg/1114/032221110303/210322110303-6-1200.jpg" alt="" mode="aspectFit"/>
        <p>美丽晚霞</p>
      </li>
      <li>
        <img src="https://lmg.jj20.com/up/allimg/1114/010421142927/210104142927-8-1200.jpg" alt="" mode="aspectFit" />
        <p>皑皑白雪</p>
      </li>
      <li>
        <img src="https://lmg.jj20.com/up/allimg/1114/032221110303/210322110303-6-1200.jpg" alt="" mode="aspectFit"/>
        <p>日出观景</p>
      </li>
    </ul>
  </div>
  <div style="border-radius:100% 0% 100% 0% / 100% 0% 100% 0%;width: 800px;height: 800px;border: 1px solid red;line-height: 800px;text-align: center;">https://9elements.github.io/fancy-border-radius/#58.54.50.0--.</div>
  <div style="width: 100vw;">波浪：https://svgwave.in/</div>
  <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#F78DA7"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,233 0,233 C 55.745791824115415,257.2013053933356 111.49158364823083,281.40261078667123 182,264 C 252.50841635176917,246.59738921332877 337.7794572311921,187.59086224665063 406,179 C 474.2205427688079,170.40913775334937 525.3905874270009,212.2339402267262 592,199 C 658.6094125729991,185.7660597732738 740.6581930608038,117.47337684644452 810,147 C 879.3418069391962,176.52662315355548 935.9766403297838,303.8725523874958 1001,307 C 1066.0233596702162,310.1274476125042 1139.4352456200618,189.03641360357267 1214,156 C 1288.5647543799382,122.96358639642735 1364.282377189969,177.98179319821367 1440,233 C 1440,233 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#F78DA7"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,466 0,466 C 64.8230848505668,454.8430092751632 129.6461697011336,443.68601855032637 207,430 C 284.3538302988664,416.31398144967363 374.23840604603237,400.09893507385783 438,385 C 501.76159395396763,369.90106492614217 539.4002061147372,355.91824115424254 606,383 C 672.5997938852628,410.08175884575746 768.160769495019,478.2281003091722 844,497 C 919.839230504981,515.7718996908278 975.9567159051871,485.16935760906904 1029,458 C 1082.0432840948129,430.83064239093096 1132.0123668842323,407.0944692545517 1200,409 C 1267.9876331157677,410.9055307454483 1353.9938165578837,438.4527653727241 1440,466 C 1440,466 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path></svg>

</body>
</html>
